import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb } from 'antd';
import {
    DesktopOutlined,
    PieChartOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { routerList } from '../../utils/routerList';
import { withRouter } from 'react-router';
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
const userinfo = { role: 2 }
@withRouter
class MyMenu extends Component {
    state = {
        collapsed: false,
    };
    onCollapse = collapsed => {
        this.setState({ collapsed });
    };
    itemClick = (key) => {
        console.log(key.key);
        this.props.history.push(key.key)
    }
    renderItem = (routerList) => {
        // const 获取用户信息

        return (
            routerList.map((item, i) => {
                if (item.children) {
                    if (userinfo.role < item.role)
                        return null
                    else {
                        return (
                            <SubMenu key={i} icon={item.icon} title={item.title}>
                                {this.renderItem(item.children)}
                            </SubMenu>
                        )

                    }
                } else {
                    return (
                        <Menu.Item key={item.path} icon={item.icon}>
                            {item.title}
                        </Menu.Item>
                    )

                }
            })
        )
    }
    render() {
        const { collapsed } = this.state;

        return (
            <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                <h1 className="logo logoTitle" style={{
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    color: '#123456',
                    fontSize: 24,
                    fontWeight: 900,
                    lineHeight: 2.2
                }}>
                    企业管理系统
                </h1>
                <Menu
                    theme="dark"
                    defaultSelectedKeys={['1']}
                    mode="inline"
                    onClick={this.itemClick}
                >
                    {this.renderItem(routerList)}
                </Menu>
            </Sider>
        )
    }
}
export default MyMenu;